<template>
  <div>
    关于组件间通信
    <div class="com-box" style="background-color: seagreen">
      <div class="item" style="color: #fff">
        {{ busInfo }}
      </div>
      <div class="item">
        <Busbox style="height: 100%"></Busbox>
      </div>
    </div>
  </div>
</template>

<script setup>
import Busbox from "./component/bus.vue";
import Bus from "../../config/Bus";
import { onMounted, onUnmounted, ref } from "vue";

let busInfo = ref("");

// onMounted(() => {
Bus.$on("change", (res) => {
  console.log("子组件传递参数", res);
  busInfo.value = res;
});
// });

onUnmounted(() => {
  Bus.$off("change");
});
</script>

<style scoped lang="less">
.com-box {
  display: flex;
  height: 100px;
  // justify-items: center;
  align-items: center;
  .item {
    flex: 1;
    height: 90px;
  }
}
</style>
